<template>
  <div class="item-config">
    <el-form
       label-position="top"
       label-width="100px"
      :model="autotaskConfigForm"
      ref="autotask-form"
      :rules="autotaskConfigRules"
    >
        <el-form-item :label="$t('custom.connector.userName')" prop="userName">
        <el-input
          v-model="autotaskConfigForm.userName"
          :placeholder="$t('custom.connector.interuserName')"
        ></el-input>
      </el-form-item>

      <el-form-item v-show="false" :label="$t('custom.connector.integrationCode')" prop="integrationCode">
        <el-input
          v-model="autotaskConfigForm.integrationCode"
          :placeholder="$t('custom.connector.interIntegrationCode')"
        ></el-input>
      </el-form-item>

        <el-form-item :label="$t('custom.connector.secret')" prop="secret">
        <el-input
          :type="passwordCheck?'text':'password'"
          v-model="autotaskConfigForm.secret"
          :placeholder="$t('custom.connector.intersecret')"
        >
        <i slot="suffix" :class="passwordCheck?'cuifont icon_eye_show':'cuifont icon_eye_hide'"
                      @click="passwordCheck=!passwordCheck"></i>
        </el-input>
      </el-form-item>

      <el-form-item v-if='false'>
        {{ autotaskConfigForm.baseUrl }}
      </el-form-item>

      <el-form-item>
        <!-- <el-button
          style="width:100px;"
          size="small"
          @click="cancelThisConfig"
          >{{ $t('cancel') }}</el-button
        > -->
        <el-button
          type="primary"
          :loading="testLoading"
          style="width:165px;margin-top: 6px;"
          size="small"
          @click="startTestConfig"
          >{{ $t('custom.connector.savequickbookspath') }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Component } from './modules/Component.js'
import Trail from '@/components/storybook/mixins/trail'

export default {
  mixins: [Trail],

  props: {
    autotaskConfigForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      passwordCheck: false,
      autotaskConfigRules: {
        integrationCode: [
          {
            required: true,
            message: this.$t('custom.connector.interIntegrationCode'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        secret: [
          {
            required: true,
            message: this.$t('custom.connector.intersecret'),
            trigger: 'blur'
          }
        ],
        userName: [
          {
            required: true,
            message: this.$t('custom.connector.interuserName'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ]
      },
      testLoading: false
    }
  },
  created () { },
  methods: {
    cancelThisConfig () {
      this.autotaskConfigForm = {
        integrationCode: '',
        userName: '',
        secret: '',
        baseUrl: ''
      }
    },
    startTestConfig () {
      this.validateConfigForm().then(() => {
        this.testLoading = true
        // this.$interface.other.getAutoTaskBaseUrlApi(this.autotaskConfigForm.userName)
        // // this.$interface.other.getAutoTaskBaseUrlApi({ user: this.autotaskConfigForm.userName })
        //   .then(res => {
        //     if (res.data.url) {
        //       this.autotaskConfigForm.baseUrl = res.data.url
        this.autotaskConfigForm.baseUrl = ``
        this.$nextTick(() => {
          this.testConfigAction()
        })
        //     } else {
        //       this.testLoading = false
        //     }
        //   }).catch(() => {
        //     this.testLoading = false
        //   })
      })
    },
    testConfigAction () {
      const params = {
        ...this.autotaskConfigForm,
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: 'AUTOTASK'
      }

      this.$interface.taskManager
        .postClientData(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.testLoading = false
            Component.$emit('getConnectorConfig')
            return this.$message.error(res.msg)
          }

          this.testLoading = false
          this.synctdData()
          return this.$message.success(res.msg)
        }).catch(() => {
          this.testLoading = false
        })
    },
    validateConfigForm () {
      return this.$refs['autotask-form'].validate()
    },
    synctdData () {
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: 'AUTOTASK'
      }
      this.$interface.taskManager.syncClientData(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }

        Component.$emit('getConnectorConfig')
        return this.$message.success(res.msg)
      }).catch(() => {
      })
    },
    detail () {

    }
  }
}
</script>

<style scoped></style>
